<template>
	<div class="config-index">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
			<el-form-item prop="title" label="协议标题">
				<el-input style="width: 300px;" v-model="ruleForm.title" placeholder="请输入协议标题"></el-input>
			</el-form-item>
			<el-form-item prop="version" label="协议版本">
				<el-input style="width: 300px;" v-model="ruleForm.version" placeholder="请输入协议版本"></el-input>
			</el-form-item>
			<el-form-item prop="effectiveDate" label="生效日期">
				<el-date-picker style="width: 300px;" v-model="ruleForm.effectiveDate"
					value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" type="datetime"
					placeholder="选择生效日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item prop="content" label="协议内容">
				<div style="border: 1px solid #ccc;">
					<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
						:mode="mode" />
					<Editor v-if="html" style="height: 500px; overflow-y: hidden;" v-model="html"
						:defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
				</div>
			</el-form-item>
		</el-form>
		<div style="text-align: center;margin-top: 10px;margin-bottom: 20px;">
			<el-button type="primary" size="mini" @click="go2Submit">{{ruleForm.id ? "立即更新" : "立即创建"}}</el-button>
			<el-button size="mini" @click="go2Cancel">取 消</el-button>
		</div>
	</div>
</template>

<script>
	import {
		addPrivacyProtocol,
		updatePrivacyProtocol,
	} from '@/api/privacyProtocol'
	import {
		Editor,
		Toolbar
	} from '@wangeditor/editor-for-vue'

	export default {
		components: {
			Editor,
			Toolbar
		},
		props: {
			originData: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				editor: null,
				html: '<p>hello</p>',
				toolbarConfig: {},
				editorConfig: {
					placeholder: '请输入协议内容...'
				},
				mode: 'default', // or 'simple'
				dialogVisible: false,
				ruleForm: {
					title: "",
					version: "",
					content: "",
					effectiveDate: ""
				},
				rules: {
					title: [{
						required: true,
						message: '请输入协议标题',
						trigger: 'blur'
					}],
					version: [{
						required: true,
						message: '请输入协议版本',
						trigger: 'blur'
					}],
					content: [{
						required: true,
						message: '请输入协议内容',
						trigger: 'blur'
					}],
					effectiveDate: [{
						required: true,
						message: '请选择生效日期',
						trigger: 'blur'
					}],
				},
				loading: "",
				policyTypeOptions: [],
				options: []
			}
		},
		mounted() {
			if (Object.keys(this.originData).length > 0) {
				this.ruleForm = {
					...this.originData
				}
				console.log("this.originData", this.originData)
			}
			// this.go2Query()
		},
		beforeDestroy() {
			const editor = this.editor
			if (editor == null) return
			editor.destroy() // 组件销毁时，及时销毁编辑器
		},
		methods: {
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
				this.html = this.originData.content
			},
			go2Submit() {
				this.$refs['ruleForm'].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '提交中',
							spinner: 'el-icon-loading',
							background: 'rgba(0, 0, 0, 0.7)'
						});
						let req = {
							...this.ruleForm,
							content: this.html
						}
						if (this.ruleForm.id) {
							// 更新操作
							updatePrivacyProtocol(req).then((res) => {
								if (res.code === 0) {
									const message = res.message
									this.$message.success('更新成功')
									this.go2Cancel()
								} else {
									this.$message({
										type: 'error',
										message: res.msg || '更新失败'
									})
								}
							}).catch((error) => {
								console.log(error)
							}).finally(() => {
								loading.close()
							})
						} else {
							// 添加操作
							addPrivacyProtocol(req).then((res) => {
								console.log("aaaaaa", res)
								if (res.code === 0) {
									const message = res.message
									this.$message.success('新增成功')
									this.go2Cancel()
								} else {
									this.$message({
										type: 'error',
										message: res.msg || '新增失败'
									})
								}
							}).catch((error) => {
								console.log(error)
							}).finally(() => {
								loading.close()
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			go2Cancel() {
				this.$emit('close')
			}
		},
	}
</script>

<style lang="scss">
	.config-index {
		display: flex;
		flex-direction: column;
		// justify-content: center;
		// align-items: center;
	}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>